<template>
	<view class="forget-pass_wrapper">
		<view class="from_item_lists">
			<!-- 手机验证码 -->
			<view class="form_item">
				<view class="item_title">
					<!-- <image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/password.svg"></image> -->
					<text>旧密码</text>
				</view>
				<input type="password" v-model="oldPass" placeholder="请输入旧密码" />
			</view>
			<view class="form_item">
				<view class="item_title">
					<!-- <image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/password.svg"></image> -->
					<text>新密码</text>
				</view>
				<input type="password" v-model="newPass" placeholder="请输入新密码" />
			</view>
			<view class="form_item">
				<view class="item_title">
					<!-- <image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/password.svg"></image> -->
					<text>确认新密码</text>
				</view>
				<input type="password" v-model="newPassConfirm" placeholder="请确认新密码" />
			</view>
		</view>
		<button type="warn" class="form_btn" :disabled='disabledSubmit' @click="onUpdatePass">提交</button>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue";
	export default {
		data() {
			return {
				oldPass: "",
				newPass: "",
				newPassConfirm: "",
				mobile: '', // 手机号
				verifyCode: '', // 验证码
				newPassword: '', // 新的密码
				confirmNewPassword: '', // 确认新密码
				codeText: '获取验证码', // 验证码按钮文本
				countdown: 60, // 倒计时
				disabledVerify: false, // 禁用验证码按钮
				disabledSubmit: false, // 禁用提交按钮
				countDownInterval: null
			};
		},
		methods: {
			// 获取验证码
			getVerifyCode() {
				if (this.mobile === '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return
				}
				if (!this.$util.checkMobile(this.mobile)) {
					uni.showToast({
						title: '手机号格式有误',
						icon: 'none'
					})
					return
				}

				if (this.countdown !== 60) return;

				this.countDownFn();

				this.$api.getVerifyCode({
					mobile: this.mobile,
					type: 'forget'
				}, res => {
					if (res.data.type !== 'ok') {
						// 用户名不存在
						clearInterval(this.countDownInterval);
						this.disabledVerify = false;
						this.codeText = '获取验证码';
					}
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					});
				})
			},
			// 更新密码
			onUpdatePass() {
				if (this.oldPass == "") {
					uni.showToast({
						title: "请输入旧密码",
						icon: "none"
					});
					return;
				}
				if (this.newPass == "") {
					uni.showToast({
						title: "请输入新密码",
						icon: "none"
					});
					return;
				}
				if (this.newPass.length < 6 || this.newPass.length > 16) {
					uni.showToast({
						title: "新密码长度在6~16位之间",
						icon: "none"
					});
					return;
				}
				if (this.newPassConfirm == "") {
					uni.showToast({
						title: "请再次输入新密码",
						icon: "none"
					});
					return;
				}
				if (this.newPassConfirm != this.newPass) {
					uni.showToast({
						title: "两次输入的密码不一样",
						icon: "none"
					});
					return;
				}
				uni.showLoading();
				this.$api.updatePass({
						password: this.oldPass,
						new_password: this.newPassConfirm
					},
					res => {
						uni.hideLoading();
						uni.showToast({
							title: res.data.message,
							icon: "none"
						});
						if (res.data.type == 'ok') {
							uni.showToast({
								title: res.data.message,
								icon: "none"
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 2
								});
							}, 1000);

						}

					}
				);
			}
		},
		components: {
			uniIcon
		}
	};
</script>

<style lang="scss" scoped>
	.forget-pass_wrapper {
		height: 100vh;
		padding: 20upx;
		box-sizing: border-box;
		background-color: #F7F7F7;

		.from_item_lists {
			padding: 0 20upx 30upx 20upx;
			box-sizing: border-box;
			box-shadow: 0 0 1upx 1upx rgba(0, 0, 0, 0.1);
			border-radius: 10upx;
			overflow: hidden;
			background-color: #fff;

			.form_item {
				position: relative;

				.item_title {
					text {
						display: block;
						font-size: 14px;
						margin: 30upx 0;
					}
				}

				input {
					display: block;
					width: 100%;
					height: 50upx;
					line-height: 50upx;
					position: relative;
				}

				input::-webkit-input-placeholder {
					color: #999999;
				}

				input:after {
					content: "";
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					border-top: 1px solid rgba(0, 0, 0, 0.1);
					-webkit-transform: scaleY(.5);
					-webkit-transform-origin: 0 0;
				}

				.verify_btn {
					position: absolute;
					top: 60upx;
					right: 20upx;
					z-index: 999;
					border-radius: 50upx;
					background-color: #E03E4D;
				}
			}

			.item_title_top {
				margin-top: 0 !important;
			}

			.item_title_input {
				width: 77% !important;
			}
		}

		.form_btn {
			position: fixed;
			bottom: 100upx;
			left: 0;
			transform: translateX(5%);
			width: 90%;
			border-radius: 50upx;
			background-color: #E03E4D;

		}
	}
</style>
